<template>
	<view class="content">
		<!-- <header>
		      <view class="header">
		        <view class="gift_list_head_img_view"></view>
		      </view>
		    </header> -->


		<!--    list-item-->
		<view class="list-section">
			<view class="list">
				<view class="list-item" v-for="(item, index) in 7" :key="index" @click="toDetail(item)">
					<view class="item-content">
						<img src="https://picsum.photos/200" draggable="false">
						<view class="desc-out">
							<view class="item-title">
								<img src="https://picsum.photos/100" draggable="false">
								<view class="name">扁鹊</view>
							</view>
							<view class="desc">
								<span>脊柱微创科</span>
								<span>主任医师</span>
							</view>
						</view>

						<!-- 浮动心形图标 -->
						<view class="love">
							<img src="https://picsum.photos/100" draggable="false">
							<view>2540</view>
						</view>

					</view>
				</view>
			</view>
			<!--    list-item end -->
			<!--    更多-->
			<view class="no-more" v-if="list.length!==0">
				暂无数据
			</view>
			<!--    更多 end-->

			<view class="clear"></view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				list: []
			}
		},
		onLoad() {

		},
		methods: {
			toDetail() {
				console.log("ok");
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: $f-bg-grey;
	}

	.header {
		padding: 20px 15px 5px 15px;

		>img {
			max-width: 100%;
			display: block;
		}

	}

	.list-section {

		.list {
			display: flex;
			flex-wrap: wrap;
			padding: 0 15px 15px 15px;
			justify-content: space-between;

			.list-item {
				width: calc(50% - 7.5px);
				margin-top: 15px;
				box-sizing: border-box;
				border-radius: 16px;
				background-color: $uni-bg-color;

				.item-content {
					position: relative;

					.love {
						position: absolute;
						top: 8px;
						left: 8px;
						z-index: 100;
						display: flex;
						align-items: center;

						background-color: rgba(0, 0, 0, 0.2);
						border-radius: 20px;
						padding: 3px 8px;

						>img {
							width: $fs*1.2;
						}

						>view {
							color: #ccc;
							font-size: 12px;
							margin-left: 5px;
						}
					}

					.desc-out {
						padding: 10px;
					}

					>img {
						width: 100%;
						height: 220px;
					}

					.item-title {
						display: flex;
						align-items: center;
						padding-bottom: 5px;

						>img {
							width: 24px;
							height: 24px;
							border-radius: 50%;
						}

						.name {
							margin-left: 10px;
							font-size: $fs * 0.8;
							font-weight: bold;
							color: #27352D;
						}
					}

					.desc {
						font-size: 14px;
						color: #9AA09D;

						>span {
							margin-right: 10px;
						}
					}
				}
			}
		}

		/* 奇数行的最后一个元素左对齐 */
		.list:nth-child(odd) .list-item:last-child {
			margin-right: auto;
		}
	}
</style>
